<template>
  <div class="app-container">
    <div class="app-box" v-show="hteFile.id">
      <a-menu v-model="current" mode="horizontal" style="margin-bottom: 10px">
        <a-menu-item key="1" @click="changeTab('1')" style="width: 25%"> <a-icon type="read" /> 正文内容 </a-menu-item>

        <a-menu-item key="2" @click="changeTab('2')" style="width: 25%">
          <a-icon type="menu-unfold" /> 关键信息</a-menu-item
        >
        <!-- <a-menu-item key="3" @click="changeTab('3')"> <a-icon type="solution" /> 共享范围</a-menu-item> -->
        
        <a-menu-item key="4" @click="changeTab('4')" style="width: 25%"> <a-icon type="paper-clip" /> 附件({{attachTotal}})</a-menu-item>
        
      
        <a-menu-item key="5" @click="changeTab('5')" style="width: 25%">
          
          <a-icon type="file-done" /> 历史版本({{versionTotal}}) </a-menu-item
        >
      
      </a-menu>
      <a-card v-if="activeTab == '1'">
        <ViewFileContent ref="content" />
      </a-card>
      <a-card v-show="activeTab == '2'">
        <ViewLibFileProject
          v-show="projectNo || projectLibFile.projectNo"
          ref="mainProject"
          :parentId="parentId + ''"
          :projectNo="projectNo ? projectNo : projectLibFile.projectNo"
        />
        <ViewLibFile v-show="!(projectNo || projectLibFile.projectNo)" ref="main" :parentId="parentId + ''" />
      </a-card>
      <!-- <a-card v-show="activeTab == '3'">
        <ViewFilesRange ref="range" :fileId="hteFile.id" />
      </a-card> -->
      <a-card v-show="activeTab == '4'">
        <ViewLibFileAttach ref="attach" :hteFile="hteFile" @getTotal="(val)=>{ attachTotal = val }"/>
      </a-card>
      <a-card v-show="activeTab == '5'">
        <ViewLibFileHistory ref="history" :parentId="parentId + ''" @getTotal="(val)=>{versionTotal = val}"/>
      </a-card>

      <div class="fixed-menu">
        <div
          v-if="hteFile.authority2 === 1 && hteFile.draftVersion === Number(version)"
          class="functionMould"
          style="background-color: #ffffff"
          @click="handleEdit"
        >
          <a-icon type="form" class="menu-icon" />
          <span> 编辑文档</span>
        </div>
        <div
          v-if="hteFile.authority3 === 1 && !hteFile.content && !!downloadUrl"
          class="functionMould"
          style="background-color: #ffffff"
          @click="handleDownload"
        >
          <a-icon type="download" class="menu-icon" />
          <span> 下载文件</span>
        </div>
        <div class="functionMould" style="background-color: #ffffff" @click="handleCollect">
          <a-icon type="codepen" class="menu-icon" />
          <span>收藏文档</span>
        </div>
        <div class="functionMould" style="background-color: #ffffff" @click="handleUnCollect">
          <a-icon type="codepen" class="menu-icon" />
          <span>取消收藏</span>
        </div>
        <div v-if="hteFile.authority5 === 1"  class="functionMould" style="background-color:#FFFFFF" @click="handleForward">
          <a-icon type="file-sync" class="menu-icon" />
          <span>文件分发</span>
        </div>
        <div v-if="hteFile.authority6 === 1"  class="functionMould" style="background-color:#FFFFFF">
          <FileShareForm :fileId="hteFile.id" type="icon"/>
          <span>分享</span>
        </div>
      </div>
    </div>

    <a-modal
      title="文件签收"
      :visible="signVisible"
      @ok="handleSign"
      @cancel="handleSignCancel"
      :width="800"
      okText="确定签收"
    >
      <a-form-model ref="form">
        <div class="layui-row" style="margin-top: 4px; height: 300px">
          <div style="margin-left: 20px">
            <p>
              1、本人在海芯平台的个人账号、密码由本人保管，在系统上的所有操作均为本人自愿操作，且对本次文件的签收操作予以认可，愿意承担该操作行为产生的一切法律效果。
            </p>
            <p>2、本人点击“确认签收”按钮，即视为本人已收到选择签收的文件，且对该签收行为承诺不可撤销。</p>
            <p>
              3、本人认可系统生成的文件签收时间作为签收文件送达本人的时间，且对该时间的真实性和有效性，本人没有异议。
            </p>
            <p>
              4、本人确认签收文件前已知悉签收文件的名称、类别、共享范围、查阅记录，历史版本等基本信息，并承诺在系统签收后２小时即视为本人已查阅、学习、知晓文件内容。
            </p>
            <p>
              5、本人同意本确认书内容，并通过个人账号在系统点击“确认签收”按钮的方式确定；一旦确定，本确认书即产生与本人签名相当的效力。
            </p>
            <p style="color: red">6、实际签收单号以确认签收后为准!</p>
          </div>
        </div>
      </a-form-model>
    </a-modal>
    <file-forward-modal ref="fileForwardModal" />
  </div>
</template>

<script>
import ViewFileContent from '@/views/library/components/ViewFileContent'
import ViewLibFile from '@/views/library/components/ViewLibFile'
import ViewLibFileAttach from '@/views/library/components/ViewLibFileAttach'
import { getAction, postAction } from '@/api/manage'
import ViewFilesRange from './components/ViewFilesRange'
import ViewLibFileHistory from './components/ViewLibFileHistory'
import FileForwardModal from './modules/FileForwardModal'
import Vue from 'vue'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import ViewLibFileProject from './components/ViewLibFileProject.vue'
export default {
  components: {
    ViewFileContent,
    ViewLibFile,
    ViewLibFileAttach,
    ViewFilesRange,
    ViewLibFileHistory,
    FileForwardModal,
    ViewLibFileProject,
    FileShareForm: () => import('@/views/library/components/FileShareForm')
  },
  props: {
    parentId: {
      type: Number,
      default: null,
    },
    fileId: {
      type: Number,
      default: null,
    },
    version: {
      type: Number,
      default: null,
    },
    projectNo: {
      type: String,
      default: null,
    },
  },
  data() {
    return {
      current: ['1'],
      activeTab: '1',
      classTree: [],
      classAttrList: [],
      hteFile: {},
      urls: {
        libFileGet: '/lib/hteLibFile/getLibFile',
        ifSign: '/lib/hteLibFile/ifSign/',
        sign: '/lib/hteLibLog/sign',
        collectOperate: '/lib/hteLibLog/collect',
        unCollectOperate: '/lib/hteLibLog/unCollect',
        projectLibFileByFileId: '/hteProjectLibFile/projectLibFileByFileId',
      },

      type: 0,
      signVisible: false,
      downloadUrl: '',
      viewUrl: '',
      projectLibFile: {},
      attachTotal:0,
      versionTotal:0,
    }
  },
  created() {
    if (this.$route.params.id) {
      this.type = 1
      this.fileId = this.$route.params.id
      this.version = this.$route.params.v
      const that = this
      getAction(this.urls.ifSign + this.fileId).then((res) => {
        if (res.success) {
          if (res.result === true) {
            that.fetchHteFile()
          } else {
            //弹出签收
            that.signVisible = true
          }
        } else {
          this.$message.error(res.message)
        }
      })
    }
  },
    provide(){
    return {attachTotal :  this.attachTotal,versionTotal:this.versionTotal}
  },
  watch: {
    $route(to, from) {
      // 在mounted函数执行的方法，放到该处
      if (this.$route.params.id) {
        this.type = 1
        this.fileId = this.$route.params.id
        this.version = this.$route.params.v
        const that = this
        getAction(this.urls.ifSign + this.fileId).then((res) => {
          if (res.success) {
            if (res.result === true) {
              that.fetchHteFile()
            } else {
              //弹出签收
              that.signVisible = true
            }
          } else {
            this.$message.error(res.message)
          }
        })
      }
    },
  },
  updated() {
    let that = this
    if (this.activeTab == 1) {
      if (!!that.viewUrl) {
        const content =
          '<iframe id="pdfDoc" src="' +
          that.viewUrl +
          '" width="100%;" height="100%" style="margin: 0 auto;border: medium none;"></iframe>'
        that.$refs.content.setContent(content)
      } else {
        that.$refs.content.setContent(that.hteFile.content)
      }
    }
  },
  methods: {
    initData() {
      
    },
    changeTab(tab) {
      this.activeTab = tab
    },
    fetchHteFile() {
      if (this.$route.path.startsWith('/library/file/view')) {
        const that = this
        getAction(this.urls.libFileGet, { fileId: this.fileId, version: this.version, type: this.type }).then((res) => {
          if (res.success) {
            let result = res.result
            that.hteFile = result
            // that.version = result.version
            that.$refs.content.setContent(result.content)
            that.$refs.main.setMain(result)
            this.fetchProjectLibFile()
            that.$refs.attach.listAttachment(result.id, result.version).then((attachs) => {
              if (attachs.length > 0) {
                const token = Vue.ls.get(ACCESS_TOKEN)
                if (!result.content) {
                  //默认显示第一个附件
                  let contentAttachs =
                    attachs.find((item) => {
                      return item.contentFlag == 1
                    }) || attachs[0]
                  const url =
                    process.env.VUE_APP_API_BASE_URL +
                    '/lib/attach/preview?token=' +
                    token +
                    '&id=' +
                    contentAttachs.attachId +
                    '&ftpKey=ftp' +
                    '&busKey=' +
                    contentAttachs.fileId
                  let viewUrl = ''
                  if (that.hteFile.authority3 === 1) {
                    viewUrl = process.env.BASE_URL + '/pdf/web/normalViewer.html?file=' + encodeURIComponent(url)
                  } else {
                    viewUrl = process.env.BASE_URL + '/pdf/web/viewer.html?file=' + encodeURIComponent(url)
                  }
                  this.viewUrl = viewUrl
                  const content =
                    '<iframe id="pdfDoc" src="' +
                    viewUrl +
                    '" width="100%;" height="100%" style="margin: 0 auto;border: medium none;"></iframe>'
                  that.$refs.content.setContent(content)
                  that.downloadUrl =
                    process.env.VUE_APP_API_BASE_URL +
                    '/lib/attach/download?token=' +
                    token +
                    '&id=' +
                    contentAttachs.attachId +
                    '&ftpKey=ftp' +
                    '&busKey=' +
                    contentAttachs.fileId
                }
              }
            })
            that.$refs.history.fetchHistories(result.id)
            let activeTab = this.$route.query.activeTab
            if (activeTab) {
              this.activeTab = this.$route.query.activeTab
              this.current = [this.activeTab]
            }
          } else {
            that.$message.error(res.message)
          }
        })
      }
    },
    handleSign() {
      const that = this
      postAction(this.urls.sign + '?fileId=' + this.fileId).then((res) => {
        if (res.success) {
          that.$message.success('签收成功')
          that.fetchHteFile()
          that.signVisible = false
        } else {
          this.$message.error(res.message)
        }
      })
    },
    handleSignCancel() {
      this.signVisible = false
      window.CloseCefTab ? window.CloseCefTab() : window.close()
    },
    handleEdit() {
      let urlJump = this.$router.resolve({
        path: '/library/file/edit/' + this.parentId + '/' + this.fileId + '/' + this.version,
      })
      window.open(urlJump.href, '_blank')
    },
    handleForward() {
      this.$refs.fileForwardModal.show(this.fileId)
    },
    handleCollect() {
      const that = this
      getAction(this.urls.collectOperate, { fileIds: this.fileId }).then((res) => {
        if (res.success) {
          that.$message.success(res.message)
        } else {
          that.$message.warning(res.message)
        }
      })
    },
    handleUnCollect() {
      const that = this

      this.$confirm({
        title: '确定取消收藏文档？',
        onOk() {
          getAction(that.urls.unCollectOperate, { fileIds: that.fileId }).then((res) => {
            if (res.success) {
              that.$message.success(res.message)
              that.fetchFileList()
            } else {
              that.$message.warning(res.message)
            }
          })
        },
      })
    },
    handleDownload() {
      window.open(this.downloadUrl)
    },
    fetchProjectLibFile() {
      if (this.fileId) {
        getAction(this.urls.projectLibFileByFileId + '?id=' + this.fileId).then((res) => {
          if (res.success) {
            this.projectLibFile = res.result
            this.$set(this.hteFile,"projectNo",this.projectLibFile.projectNo)
            this.$refs.mainProject.setMain(this.hteFile)
          }
        })
      }else{
        this.$refs.mainProject.setMain(this.hteFile)
      }
    },
  },
}
</script>

<style scoped>
#app {
  background-color: #f5f5f5 !important;
}
.app-container {
  position: relative;
  background-color: #f5f5f5;
  width: 100%;
  min-width: 1200px;
  height: 100%;
  justify-content: center;
  padding-top: 30px;
  padding-bottom: 0px;
}
.botton-bar {
  position: fixed;
  bottom: 0;
  z-index: 9;
  width: calc(100% - 194px);
}
.app-box {
  width: calc(100% - 194px);
  height: 100%;
  min-width: 1200px;
  margin: 0 auto;
  position: relative;
}
.fixed-menu {
  position: absolute;
  top: 48px;
  right: 0vw;
  z-index: 10000;
  width: 80px;
  right: -95px;
}
.fixed-menu span {
  font-size: 12px;
}
.functionMould {
  background-color: #ffffff;
  height: 80px;
  padding-top: 18px;
  text-align: center;
  margin-bottom: 10px;
  cursor: pointer;
}
.functionMould > span {
  width: 100%;
  text-align: center;
  font-size: 12px;
  color: #000000;
  display: block;
}
.menu-icon {
  font-size: 24px;
  color: #31a0e1;
}
.ant-menu-item {
  border: 1px solid #31a0e13d !important;
  padding: 0 0px;
  /*width: 20%;*/
  text-align: center;
}
.ant-menu-item-selected {
  color: #ffffff !important;
  background: #31a0e1 !important;
}
</style>

<style scoped lang="less">
/deep/ .app-box .ant-card {
  height: calc(100% - 68px);
  overflow-y: auto;
}
/deep/ .app-box .ant-card .ant-card-body {
  height: 100%;
}
</style>
